<template>
  <div class="leftTopBox">
    <!-- <img src="../assets/left1.png" alt="" srcset=""> -->
    <h4>停车场收费TOP10</h4>
    <div>
      <ul>
        <li v-for="item in getOneParkSpaceCountList" :key="item.index">
          <span class="parkName">
            <b> {{item.park_name}}</b>
            <i>No.{{item.live}}</i>
          </span>
          <!-- <span class="used_count">{{item.used_count}}</span> -->
          <!-- <span class="free_count">{{item.free_count}}</span> -->
          <span class="total_count" :style="{left:1.5 + item.total_charge/totalnum *2 + 'rem'}">{{item.total_charge}}元</span>
          <div class="percentline">
            <i :style="{ width:item.total_charge/totalnum * 2 + 'rem'}"></i>
          </div>

        </li>
      </ul>
    </div>

  </div>
</template>

<script>
import { getTotalPayChargeTOP10 } from '../api/api';
export default {
  name: 'LeftTop',
  data() {
    return {
      msg: '',
      totalnum: '500000',
      getOneParkSpaceCountList: []
    }

  },
  mounted() {

    this.getTotalPayChargeTOP10()
    var that = this;
    setInterval(() => {
      that.getTotalPayChargeTOP10()
    }, 10000)
  },
  methods: {
    getTotalPayChargeTOP10() {
      getTotalPayChargeTOP10().then(res => {
        console.log(res)
        this.getOneParkSpaceCountList = res.data;
        this.totalnum = this.getOneParkSpaceCountList[0].total_charge
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.leftTopBox {
  position: absolute;
  left: 0.47rem;
  top: 0.58rem;
  width: 5rem;
  height: 3.15rem;
  background: url(../assets/left11.png) no-repeat left top;
  color: #ff0;
}
/* .leftTopBox img {
  width: 100%;
  height: 100%;
  opacity: 0;
} */

.leftTopBox h4 {
  position: absolute;
  left: 0.3rem;
  top: 0.13rem;
  font-size: 0.18rem;
  color: #18b3f0;
  margin: 0;
  padding: 0;
}

.leftTopBox ul {
  margin: 0;
  padding: 0.57rem 0 0 0.35rem;
}
.leftTopBox ul li {
  position: relative;
  width: 4.33rem;
  padding: 0 0.06rem;
  height: 0.23rem;
  line-height: 0.23rem;
  text-align: left;
  list-style: none;
  font-size: 0.14rem;
  color: #fff;
  /* margin-bottom: 0.08rem; */
  /* background: url(../assets/left1libg.png) no-repeat left top; */
  /* border: 1px solid #18b3f0; */
}

.used_count {
  font-size: 0.12rem;
  position: absolute;
  left: 2.1rem;
  top: -0.05rem;
  color: #e6d44f;
}
.free_count {
  font-size: 0.12rem;
  position: absolute;
  left: 2.85rem;
  top: -0.05rem;
  color: #55d6e9;
}

.parkName {
  position: absolute;
  left: -0.2rem;
  width: 1.85rem;
  text-align: right;
  display: block;
  height: 0.25rem;
}

.parkName b {
  width: 1.45rem;
  height: 0.25rem;
  overflow: hidden;
  text-align: right;
  white-space: nowrap;
  text-overflow: ellipsis;
  float: left;
  font-weight: normal;
  padding-right: 2px;
}

.parkName i {
  color: #55d6e9;
  font-style: normal;
  display: block;
  float: left;
  width: 0.25rem;
}
.total_count {
  font-size: 0.12rem;
  position: absolute;
  left: 3.47rem;
  top: -0.09rem;
  color: #ffff00;
}

.percentline {
  width: 2rem;
  position: absolute;
  left: 1.68rem;
  top: 0.13rem;
  height: 0.04rem;
  overflow: hidden;
  background: #0a1540;
  /* border-radius: 2px; */
  background: linear-gradient(-45deg, transparent 0.04rem, #0a1540 0) bottom
      right,
    linear-gradient(135deg, transparent 0.04rem, #0a1540 0) top left,
    linear-gradient(45deg, transparent 0rem, #070f2e 0) bottom left,
    linear-gradient(-135deg, transparent 0rem, #0a1540 0) top right;
  background-size: 50% 100%;
  background-repeat: no-repeat;
}
.percentline i {
  position: absolute;
  left: 0rem;
  top: 0rem;
  height: 0.04rem;
  overflow: hidden;
  background: #116698;
  background: linear-gradient(-45deg, transparent 0.04rem, #116698 0) bottom
      right,
    linear-gradient(135deg, transparent 0.04rem, #116698 0) top left,
    linear-gradient(45deg, transparent 0rem, #116698 0) bottom left,
    linear-gradient(-135deg, transparent 0rem, #0a1540 0) top right;
  background-size: 65% 100%;
  background-repeat: no-repeat;
}
</style>
